import React from 'react';
import {connect} from 'dva';
import {Button, Form, Input} from 'antd';
import styles from './LoginPage.less';

import ComponentBase from '../../components/Base/ComponentBase';
import Icon from "antd/es/icon";


const FormItem = Form.Item;

const tc_title = '樹雲智造';
@Form.create()
@connect(({user}) => ({...user}))
export default class LoginPage extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {
      selectIdentity: 'tms',
      buttonClass: '',
      buttonText: '登录',
      // scrollClass: styles.scrollDiv,
    };
  }

  changeState = () => {
    this.setState({
      buttonClass: '',
      buttonText: '登录',
      scrollClass: styles.scrollDiv,
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          buttonClass: styles.changeButton,
          scrollClass: `${styles.scrollDiv} ${styles.goScroll}`,
        });

        const {password} = values;

        const _password = this.getCryptoPassword(password);
        const params = {...values};
        params.password = _password;
        this.props.dispatch({
          type: 'user/login',
          payload: {
            ...params,
          },
          changeState: this.changeState,
        });
      }
    });
  };

  // selectChange = (value) => {
  //   this.setState({
  //     selectIdentity: value,
  //   });
  // };

  render() {
    const {form, tc_sysName, tc_iconUrl} = this.props;
    // console.log('---props:',this.props)
    // const title = tc_sysName ? tc_sysName : tc_title;
    const title = this.getPageTitle();
    const {getFieldDecorator} = this.props.form;
    const username = localStorage.getItem('username');
    const logImg = tc_iconUrl || require('../../assets/treec.png');
    const color = this.getThemeProp('primary-color');
    return (
      <div className={styles.container}>
        {/*<img src={imgUrl} className={styles.imgStyle} />*/}
        <div className={styles.main}>
          {/*<div className={styles.title}><img src={logImg} className={styles.logo}/>{title}*/}
          <div className={styles.title}>
            <Icon type="slack"    style={{fontSize: 32, color: 'blue',marginRight:8}} />
             {title}
          </div>
          <Form onSubmit={this.handleSubmit} className={styles.loginForm}
                style={{position: 'sticky', zIndex: 1, overflow: 'hidden', width: '100%'}}>
            <FormItem>
              {getFieldDecorator('username', {
                rules: [{required: true, message: '请输入用户名！'}],
                initialValue: username,
              })(
                <Input
                  placeholder="用户名"
                />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [{required: true, message: '请输入密码！'}],
              })(
                <Input
                  type="password"
                  placeholder="密码"
                />
              )}
            </FormItem>

            <FormItem style={{overflow: 'hidden'}}>
              <Button
                className={this.state.buttonClass}
                type="primary"
                htmlType="submit"
                style={{height: '40px', width: '100%', backgroundColor: color, borderColor: color}}
              >
                {this.state.buttonText}
              </Button>
              <div className={this.state.scrollClass}/>
            </FormItem>
          </Form>
        </div>
     <div> <div className={styles.footer} style={{textAlign: 'center', fontSize: 18}}>新蓝化学</div></div>
        {/*<Star number={300}/>*/}
      </div>
    );
  }
}

//
// export default function () {
//
//   return (
//     <div className={styles.container}>
//       <LoginComponent/>
//       <Star number={200}/>
//       {/*<StarfieldAnimation*/}
//       {/*  depth={1000}*/}
//       {/*  lineWidth={4}*/}
//       {/*  style={{*/}
//       {/*    position: 'absolute',*/}
//       {/*    width: '100%',*/}
//       {/*    height: '100%',*/}
//       {/*  }}*/}
//       {/*/>*/}
//     </div>);
// }
